<template>
    <div class="el1">
        <el-row>
            <el-button icon="el-icon-search" circle @click="query"></el-button>
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
            <el-button type="success" icon="el-icon-check" circle></el-button>
            <el-button type="info" icon="el-icon-message" circle></el-button>
            <el-button type="warning" icon="el-icon-star-off" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
        </el-row><br>
        <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间">
        </el-date-picker><br><br>
        <el-button :plain="true" @click="open1">消息</el-button>
        <el-button :plain="true" @click="open2">成功</el-button>
        <el-button :plain="true" @click="open3">警告</el-button>
        <el-button :plain="true" @click="open4">错误</el-button><br>
        <el-carousel height="150px">
            <el-carousel-item v-for="item in 6" :key="item">
                <h3 class="small">{{ item }}</h3>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
export default {
    name: 'ElementUI',
    data() {
        return {
            value1: '',
            count: 0
        }
    }, methods: {
        query() {
            //转化为时间戳
            console.log(new Date(this.value1).getTime());
            // 将时间戳转换为时间
            console.log(new Date(this.value1).toLocaleString());
            this.$message({
                showClose: true,
                message: '下方的时间是：' + new Date(this.value1).toLocaleString(),
                type: 'success'
            });

        },
        open1() {
            this.$message({
                showClose: true,
                message: '这是一条消息提示'
            });
        },

        open2() {
            this.$message({
                showClose: true,
                message: '恭喜你，这是一条成功消息',
                type: 'success'
            });
        },

        open3() {
            this.$message({
                showClose: true,
                message: '警告哦，这是一条警告消息',
                type: 'warning'
            });
        },

        open4() {
            this.$message({
                showClose: true,
                message: '错了哦，这是一条错误消息',
                type: 'error'
            });
        },
    }

}

</script>

<style>
.el1 {
    margin-top: 10px;
    padding: 10px;
}

.el-carousel__item h3 {
    color: #6aeb7d;
    font-size: 50px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #a4bde0;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #4086d6;
}
</style>